import getState from "@/api/state";
import ZuiEchart from "@/template/zuiEchart/zuiEchart";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";


const ClmModule9 = ({ condition }) => {
    const [message, setMessage] = useState("");
    const [loading, setLoading] = useState(true);
    const [state1, setState1] = useState({
        "dayList": ["2016", "2017", "2018", "2019", "2020", "2021"],

        "data": []
    })
    const [state2, setState2] = useState({
        "dayList": ["2022/01", "2022/02", "2022/03", "2022/04", "2022/05", "2022/06", "2022/07", "2022/08", "2022/09", "2022/10", "2022/11", "2022/12"],
        "data": []
    })


    useEffect(() => {
        getState({
            moduleName: "cheatRefuCntYear",
            state: state1,
            apiUrl: "/cifgp-core-api/claim/trendMonthAndYear",
            condition: { ...condition, cType: "clmrejectNumTrend", dateType: "tYear", statDate: condition.dateType === "tYear" ? condition.statDate : "" },
            setState: setState1,
            setLoading,
            setMessage
        })
        getState({
            moduleName: "cheatRefuCntMonth",
            state: state2,
            apiUrl: "/cifgp-core-api/claim/trendMonthAndYear",
            condition: { ...condition, cType: "clmrejectNumTrend", dateType: "tMonth", statDate: condition.dateType === "tMonth" ? condition.statDate : null },
            setState: setState2,
            setLoading,
            setMessage
        })
    }, [condition])



    return (
        <>
            <ZuiEchart
                message={message}
                condition={condition}
                authSwitch={true}
                loading={loading}
                data={[state1, state2]}
                title="拒赔客户趋势"
                subtitle="（单位：客户数）"
                useXis
                defaultModule="adBar"
                btn={["年", "月"]}
                style={{ width: "40%" }}
            />
        </>
    )
}
export default ClmModule9;